{% extends 'blog/base.html' %} 
{% load static %}

{% block cate-title%}
<title> 阿凌的猫爬架</title>
{% endblock cate-title%}

{% block load-src%}
    <!--<link rel="stylesheet" href="https://at.alicdn.com/t/font_1962070_9o8c1iysrsu.css">-->
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1962070_i1ftnnu9s7i.css">
    <link rel="stylesheet" href="{% static 'blog/css/index.css'%}" id="index-css">
    <link rel="stylesheet" href="{% static 'blog/css/extraClass.css'%}">
    <script type="text/javascript" src="{% static 'blog/js/jquery.js'%}"></script>
    <script type="text/javascript" src="{% static 'blog/js/index.js'%}"></script>
{% endblock load-src%}


{% block hitokoto %}
    <div class="type-box">
        <div id="hitokoto-text"></div>
        <div class="bottom-blink"></div>
    </div>
    <div id="hitokoto-info"></div>
    <a class="fun-btn-1" target="_blank" title="My Image Hosting" href="https://ling_boogie.gitee.io/peasonal_pic/">
        <i class="iconfont icon-PhotoFilter-1"></i>
    </a>
    <a class="fun-btn-2" href="https://www.plsseer0qaq.top/" style="text-decoration: none;color: #203744" title="myRadio" target="_blank"><i class="iconfont icon-song"></i></a>
{% endblock hitokoto %}

{% block article %}
    {% for post in post_list %}
    <div class="article-box">
        <p class="post-meta">
            -VIEW: <span class="post-time">{{ post.views }}</span>
            -POST: <span class="post-time">{{ post.created_time }}</span>
            <i class="iconfont icon-icon-"></i> 
            <a class="post-cate" href="{% url 'blog:category' post.category.name %}" target="_blank" >
                {{ post.category.name }}
            </a>
            <i class="iconfont icon-biaoqian"></i> 
                {% for tag in post.tags.all %}
                    <a class="post-cate" href="{% url 'blog:tag' tag.name %}" target="_blank">
                        {{tag.name}}
                    </a>
                {% endfor %}
        </p>
        <a href="{{ post.get_absolute_url }}" class="article-title">{{ post.title }}
        </a>
        <div class="box-background"></div>
        <div class="box-main">
            <p>{{ post.excerpt }}</p>
        </div>
    </div>
    {% endfor %}
    <div class="article-footer">
        <div class="bottom-page-item page-item1">
            {% if post_list.has_previous %}
                <a href="?page={{ post_list.previous_page_number }}" class="bottom-page-prev" title="previous page">
                    <i class="iconfont icon-CatFootprint"></i>
                    <span>PREV</span>
                </a>
            {% else %}
                <a href="javascript:;" class="bottom-page-prev" title="EMPTY">
                    <i class="iconfont icon-CatFootprint"></i>
                    <span>PREV</span>
                </a>
            {% endif %}
        </div>
        <ul class="bottom-page-jump-list"></ul>
        <div class="bottom-page-item page-item2">
            {% if post_list.has_next %}
                <a href="?page={{ post_list.next_page_number }}" class="bottom-page-next" title="next page">
                    <i class="iconfont icon-right"></i>
                    <span>NEXT</span>
                </a>
            {% else %}
                <a href="javascript:;" class="bottom-page-next" title="EMPTY">
                    <i class="iconfont icon-right"></i>
                    <span>NEXT</span>
                </a>
            {% endif %}
        </div>
    </div>

{% endblock article %}

{% block clip-page %}
    <div class="footer-page">
        <div class="cur-page">
            <span class="page-cur">{{ post_list.number }}</span>
            <span>-</span>
            <span class="page-tot">{{ post_list.paginator.num_pages }}</span>
        </div>
        <ul class="page-jump-list">
        </ul>
        {% if post_list.has_previous %}
            <a href="?page={{ post_list.previous_page_number }}" class="page-prev"> 前頁
            </a>
        {% else %}
            <a href="javascript:;" class="page-prev"> 前頁 </a>
        {% endif %}
        {% if post_list.has_next %}
            <a href="?page={{ post_list.next_page_number }}" class="page-next">
                后頁
            </a>
        {% else %}
            <a href="javascript:;" class="page-next"> 下頁 </a>
        {% endif %}
    </div>
{% endblock clip-page %}
